<template>
    <div style="height: 400px;">
    <el-skeleton animated :loading="loading" :rows="7">
        <div id="t1">
            <el-tree :props="defaultProps" :data="datatree" node-key="id" check-strictly="true"
                :default-checked-keys="checked" show-checkbox @check-change="handleCheckChange" default-expand-all>
                <template #default="{ node, data }">
                    <span>
                        <span style="margin-left:10px" size="mini">{{ node.label }}</span>
                        <template v-for="obj in item">
                            <el-tag :key="obj.id" style="margin-left:10px" v-if="obj != '' && obj.oid == data.id"
                                size="mini">{{ obj.zname }}
                            </el-tag>
                        </template>
                    </span>
                </template>
            </el-tree>
        </div>
        <div style="display: flex;float: left;margin-top: 20px;">
            <el-button type="primary" @click="Confirm" :disabled="disabled">确定</el-button>
        </div>
    </el-skeleton>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { GetOrganizations } from '../../api/user/user'
interface dataes {
    dialogtreeVisible: boolean,
    datatree: any,
    page: any,
    defaultProps: any,
    loading: boolean,
    item: any,
    checked: any,
    disabled: any
}
export default defineComponent({
    props: ["datas"],
    setup(props, context) {
        const data = reactive<dataes>({
            dialogtreeVisible: false,
            datatree: [],//树型数据
            page: '',
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: true,
            item: [],
            checked: [],
            disabled: false
        })
    
        const events = {
            tree() {
                GetOrganizations({
                    page: data.page,
                    limit: 999
                }).then((res: any) => {
                    if (res.result == 0) {
                        data.datatree = res.data.data
                        data.loading = false;
                    }
                })
            },
            handleCheckChange(item: any, bool: any) {
                if (data.checked.find((d: any) => d == item.id) == undefined) {
                    data.checked.push(item.id);
                }
                if (bool) {
                    data.item.push(item)
                    console.log("aaa", data.item)
                } else {
                    console.log("前", data.checked);
                    for (let i = 0; i < data.checked.length; i++) {
                        //取消选中
                        if (item.id == data.checked[i]) {
                            data.checked.splice(i, 1)
                        }
                        //选中
                        if (data.item.length > 0) {
                            if (item.id == data.item[i].id) {
                                data.item.splice(i, 1)
                            }
                        }
                    }
                    console.log("后", data.checked);
                }
            },
            //确认
            Confirm() {
                console.log('===========')
                data.dialogtreeVisible = false
                context.emit("Dialogzuzhi", data.item)
            }
        }
        onMounted(() => {
            setTimeout(function () {
                events.tree();
                if (props.datas) {
                            data.checked = [];
                            data.item = [];
                            props.datas.forEach((item: any) => {
                                data.checked.push(item.id);
                                data.item.push(item);
                            })
                 }
        }, 1)
        })

        return {
            ...toRefs(data),
            ...events,
        }
    },
})
</script>
<style>
#t1 {
    /* border: 1px gray solid;
    border-radius: 5px; */
    width: 100%;
}
</style>













